<script setup lang="ts">
import { onMounted, ref } from 'vue'

interface Props {
  content?: string
  length?: number
  placement?: string
}

const props = withDefaults(defineProps<Props>(), {
  content: '',
  length: 10,
  placement: 'top'
})

const tooltip = ref<boolean>(false)
const show = ref<string>('')

onMounted(() => {
  if (props.content.length <= props.length) {
    tooltip.value = false
    show.value = props.content
  } else {
    tooltip.value = true
    show.value = `${props.content.substring(0, props.length)}...`
  }
})
</script>

<template>
  <template v-if="tooltip">
    <el-tooltip :content="props.content" :placement="props.placement" effect="light">
      <span>{{ show }}</span>
    </el-tooltip>
  </template>
  <template v-else>
    <span>{{ show }}</span>
  </template>
</template>

<style lang="scss" scoped></style>
